<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>伪元素</title>
        <style type="text/css">

            body{ border: 1px solid red } 
            h3 { text-align: center ; }

            .father { 
                border: 1px solid blue ;
                background: #dedede ;
                margin: 50px auto ; 
                width: 400px ;
            }

            .child {
                height: 100px ;
                background: purple ;
                margin: 25px ;
            }

            .second { border: none ; }
            .second .boundary { display: block ; height: 1px ; background: none ; border: none ; }

            .third { border: none ; }
            /* 在 .third 元素 内部的最前方 生成一个 伪元素 */
            .third::before {
                display: block ;
                height: 1px ;
                content: '' ;
            }

            /* 在 .third 元素 内部的最后方 生成一个 伪元素 */
            .third::after {
                display: block ;
                height: 1px ;
                content: '' ;
            }

            .fourth>.child::before { display: block ; height: 16px ; content: '' ; background: #9696ff ; }
            .fourth>.child::after { display: block ; height: 16px ; content: '' ; background: #ffff00 ; }

        </style>
    </head>
    <body>


        <h3>使用边框解决父子元素外边距重叠问题</h3>
        <div class="father first">
            <div class="child"></div>
        </div>

        <hr>

        <h3>施法做个结界搞定父子元素外边距重叠问题</h3>
        <div class="father second">
            <i class="boundary"></i>
            <div class="child"></div>
            <i class="boundary"></i>
        </div>

        <hr>

        <h3>使用伪元素解决父子元素外边距重叠问题</h3>
        <div class="father third">
            <!-- third::before 会在这里生成伪元素 -->
            <div class="child"></div>
            <!-- third::after 会在这里生成伪元素 -->
        </div>

        <hr>

        <h3>理解新产生的伪元素在哪里</h3>
        <div class="father fourth">
            <div class="child">
                <!-- child::before 会在这里生成伪元素 -->
                在 
                <span style="padding:2px;border:1px solid gray;border-radius: 3px;">.child </span> 
                中的原有内容
                <!-- child::after 会在这里生成伪元素 -->
            </div>
        </div>
        
    </body>
</html>